
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MicroHeroes</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="_CSS/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      /* Override some defaults */
      html, body {
        background-color: #eee;
      }
      body {
        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
      }
      .container > footer p {
        text-align: center; /* center align it with the container */
      }
      .container {
        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
      }

      /* The white background content wrapper */
      .content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

      /* Page header tweaks */
      .page-header {
        background-color: #f5f5f5;
        padding: 20px 20px 10px;
        margin: -20px -20px 20px;
      }

      /* Styles you shouldn't keep as they are for displaying this base example only */
      .content .span10,
      .content .span4 {
        min-height: 500px;
      }
      /* Give a quick and non-cross-browser friendly divider */
      .content .span4 {
        margin-left: 0;
        padding-left: 19px;
        border-left: 1px solid #eee;
      }

      .topbar .btn {
        border: 0;
      }

    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>

    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="#">MicroHeroes</a>
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
          <p class="pull-right">Logged in as <a href="#">username</a></p>
        </div>
      </div>
    </div>

    <div class="container">

      <div class="content">
        <div class="page-header">
        

        
            <div class="span1">
                <img class="thumbnail" src="http://placehold.it/30x30" alt="">
            </div>
            <div>
                <h1>Hi Username!  <small>Let's do something good today</small></h1>
            </div>
        </div>
        
        <div class="row">
          <div class="span10">
            <h2>Singapore Airlines <span class="label warning">FEATURED COMPANY</span></h2>

            
            <div class="span9">
                <div class="row">
                    <div class="span2">
                        <img class="thumbnail" width="90" src="http://travelntourworld.files.wordpress.com/2011/07/edited-1boeing-777.jpg" alt="">
                        <p>
                            <blockquote>
                                <p>We are good</p>
                                <small>Mr X, CEO</small>
                            </blockquote>
                        </p>
                    </div>
                    
                    <div class="span7">
                    
                        <div class="row">
                        
                            <div class="span2">
                                <h4>ONGOING</h4>
                                <h1>15</h1>
                            </div>
                            
                            <div class="span2">
                                <h4>COMPLETED</h4>
                                <h1>34062</h1>
                            </div>

                            <div class="span2">
                                <h4>$RAISED</h4>
                                <h1>$93485</h1>
                            </div>
                            
                            <div class="span6">
                                <h4>Our MICRO HEROES <small><a href="#">more...</a></small></h4>
                                <ul class="media-grid">
                                  <li>
                                    <a href="#">
                                      <img class="thumbnail" width="60" src="_IMG/person1.jpg" alt="">
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#">
                                      <img class="thumbnail" width="60" src="_IMG/person2.jpg" alt="">
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#">
                                      <img class="thumbnail" width="60" src="_IMG/person3.png" alt="">
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#">
                                      <img class="thumbnail" width="60" src="_IMG/person4.jpg" alt="">
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#">
                                      <img class="thumbnail" width="60" src="_IMG/person5.jpg" alt="">
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#">
                                      <img class="thumbnail" width="60" src="_IMG/person6.jpg" alt="">
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#">
                                      <img class="thumbnail" width="60" src="_IMG/person7.jpg" alt="">
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#">
                                      <img class="thumbnail" width="60" src="_IMG/person8.jpg" alt="">
                                    </a>
                                  </li>                                  
                                </ul>     

                            </div>
                                   
                        </div>
                        
                        
                        
                    </div>
                </div>
            </div>

            <h3>Recently Sponsored Activities <small><a href="#">more...</a></small></h3>
            <div class="span9">
                <div class="row">
                    <div class="span7">
                        <h4>Tweet this Hunger Awareness Message <span class="label important">HOT</span></h4>
                        <p>343 Micro Heroes have done this <a href="#">More</a> <br/><small>1 days ago</small>
                        </p>
                    </div>
                    <div >
                        <button class="btn primary">I'll Do This</button>
                    </div>
                </div>
                
                <div class="row">
                    <div class="span7">
                        <h4>Post this Hunger Awareness Message </h4>
                        <p>145 Micro Heroes have done this <a href="#">Read More</a> <br/><small>3 days ago</small>
                        </p>
                    </div>
                    <div >
                        <button class="btn success">I've Done This</button>
                    </div>
                </div> 

                <div class="row">
                    <div class="span7">
                        <h4>Greet Our Crew <span class="label notice">PROMOTED</span> </h4>
                        <p>43 Micro Heroes have done this <a href="#">Read More</a> <br/><small>5 days ago</small>
                        </p>
                    </div>
                    <div >
                        <button class="btn success">I've Done This</button>
                    </div>
                </div>                 


            </div>
            



            
            
          </div>
            <div class="span4">
                <div class="sidebar">
                
                

                    <div class="well"> 
                    
       
                        <h5>Your Score</h5>
                        <ul>
                            <li>GP: 340</li>
                            <li>$$: 34</li>
                        </ul>                        
                                      
                        
                        <h5>Challenges</h5>
                        <ul>
                            <li><a href="#">Top Challenges</a></li>
                            <li><a href="#">Completed Challenges</a></li>
                            <li><a href="#">Achievements</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                        
                        <h5>Badges</h5>
                            
                            <ul class="media-grid">
                              <li>
                                <a href="#">
                                  <img class="thumbnail" width="40" src="_IMG/badge01.png" alt="">
                                </a>
                              </li>
                              <li>
                                <a href="#">
                                  <img class="thumbnail" width="40" src="_IMG/badge02.png" alt="">
                                </a>
                              <li>
                                <a href="#">
                                  <img class="thumbnail" width="40" src="_IMG/badge03.png" alt="">
                                </a>
                              </li>
                              <li>
                                <a href="#">
                                  <img class="thumbnail" width="40" src="_IMG/badge04.png" alt="">
                                </a>
                              </li>                        
                            </ul>     
                            more...
                        
                        <h5>Leaderboard</h5>
                        <ul>
                            <li>Apek <img class="thumbnail" src="http://placehold.it/10x10" alt=""> 3450 <img class="thumbnail" src="http://placehold.it/10x10" alt="">  $56</li>
                            <li>Benny <img class="thumbnail" src="http://placehold.it/10x10" alt=""> 2300 <img class="thumbnail" src="http://placehold.it/10x10" alt="">  $56</li>                            
                            <li>Cathy <img class="thumbnail" src="http://placehold.it/10x10" alt=""> 1202 <img class="thumbnail" src="http://placehold.it/10x10" alt="">  $56</li>
                            <li>Drogba <img class="thumbnail" src="http://placehold.it/10x10" alt=""> 234 <img class="thumbnail" src="http://placehold.it/10x10" alt="">  $56</li>
                            
                        </ul>
                        
                        <h5>Settings</h5>
                        <ul>
                            <li><a href="#">Settings</a></li>
                            <li><a href="#">Log out</a></li>
                        </ul>
                    </div>                
                

                </div>

            </div>
        </div>
      </div>

      <footer>
        <p>MicroHeroes&copy; Company 2011</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>
